<template>
  <div class="myInfo">
    <hmnavbar path="/my" title="我的资料" />
    <div class="content">
      <van-cell-group class="box">
        <van-cell class="avatar" title="头像" is-link @click="toEdit('avatar')">
          <template #default>
            <img class="img" :src="baseUrl + userInfo.avatar" alt="" />
          </template>
        </van-cell>
      </van-cell-group>
      <van-cell-group class="info">
        <van-cell
          title="昵称"
          :value="userInfo.nickname"
          is-link
          @click="toEdit('nickname')"
        />
        <!-- 根据vuex中的性别对象来设置性别 -->
        <van-cell
          title="性别"
          :value="$store.state.genderObj[userInfo.gender]"
          is-link
          @click="showGender = true"
        />
        <!-- 点击单元格显示弹窗 -->
        <van-cell
          title="地区"
          :value="areaData.city_list[userInfo.area]"
          is-link
          @click="showArea = true"
        />
        <van-cell
          title="个人简介"
          :value="userInfo.intro"
          is-link
          @click="toEdit('intro')"
        />
      </van-cell-group>
      <van-button size="large" class="btn" @click="logout">退出登录</van-button>
    </div>
    <!-- 修改性别弹框 -->
    <van-popup v-model="showGender" position="bottom">
      <van-picker
        show-toolbar
        :columns="genderArr"
        :default-index="userInfo.gender"
        @confirm="changeGender"
        @cancel="showGender = false"
      />
    </van-popup>
    <!-- 修改城市弹框 -->
    <van-popup v-model="showArea" position="bottom">
      <van-area
        :area-list="areaData"
        :columns-num="2"
        @confirm="changeArea"
        :value="userInfo.area"
        @cancel="showArea = false"
      />
    </van-popup>
  </div>
</template>
<script>
// 导入vuex的辅助函数
import { mapState } from 'vuex'
// 导入城市数据
import area from '../../../utils/area.js'
// 导入操作token的方法
import { removeLocal } from '../../../utils/local'
// 导入发送请求的方法
import { editUserInfoApi } from '../../../api/au'
export default {
  computed: {
    ...mapState(['userInfo'])
  },
  data () {
    return {
      baseUrl: process.env.VUE_APP_BASEURL,
      areaData: area /* 城市数据 */,
      showGender: false,
      genderArr: ['未知', '男孩子', '女孩子'],
      showArea: false
    }
  },
  methods: {
    // 退出登录逻辑
    logout () {
      // 确认用户是否要退出
      this.$dialog
        .confirm({
          title: '警告',
          message: '此操作将退出登录，是否继续？'
        })
        .then(() => {
          // 删除token
          removeLocal()
          // 修改登录状态
          this.$store.commit('setIsLogin', false)
          // 清空用户信息
          this.$store.commit('setUserInfo', '')
          // 跳转到登录页
          this.$router.push('/login')
        })
        .catch(() => {
          // on cancel
        })
    },
    // 修改性别功能
    async changeGender (value, index) {
      // 1.获取被选中性别
      // console.log(value, index)
      // value 性别 index 性别在genderArr对应的下标

      // 优化---显示正在修改中
      this.$toast.loading('加载中...')

      // 2.根据性别下标发送修改信息的请求
      await editUserInfoApi({
        gender: index
      })
      // // 获取修改后的用户资料并且保存到vuex中  将以下操作放在vuex中，很多地方都会用到
      // const res = await getUserInfoApi()
      // this.$store.commit('setUserInfo', res.data)

      // 调用vuex中封装的异步方法
      this.$store.dispatch('setUserInfoAsync')

      // 关闭弹窗
      this.showGender = false
      // 显示修改成功
      this.$toast.success('修改成功~')
    },
    // 修改地区功能
    async changeArea (data) {
      // console.log(data)
      // data是一个数组，保存了选中的省市信息

      // 提示用户正在修改
      this.$toast.loading('修改中...')

      // 获取城市编码提交到修改请求中
      await editUserInfoApi({
        area: data[1].code
      })

      // 重新获取用户信息并保存至vue中
      this.$store.dispatch('setUserInfoAsync')

      // 关闭弹窗
      this.showArea = false
      // 提示修改成功
      this.$toast.success('修改成功')
    },
    // 修改昵称
    toEdit (data) {
      // 跳转到修改页面,并在路径后面拼接被点击的单元格的信息
      this.$router.push('/editInfo?type=' + data)
    }
  }
}
</script>
<style lang="less" scoped>
.myInfo {
  height: 100vh;
  background-color: #f7f4f5;

  .content {
    padding: 18px 15px;
    .box {
      border-radius: 8px;
      overflow: hidden;
      .avatar {
        align-items: center;
        .img {
          width: 40px;
          height: 40px;
          border-radius: 50%;
        }
      }
    }
    .info {
      margin: 10px 0 15px 0;
      border-radius: 8px;
      overflow: hidden;
    }
    .btn {
      border-radius: 8px;
      color: #e40137;
    }
  }
}
</style>
